<template>
  <div>
  <el-divider style="margin: 0rem;" content-position="left"><h3 style="font-size: 1.15rem;">部门管理</h3></el-divider>
  <my-treeable listPath="dept/combotree" savePath="dept/save" deletePath="dept/delete" :dialogForm="form" :rules="rules" :tableAttrs="tableattr" dialogTitle="对话框" @show-dialog="sdialog">
    <template v-slot:dialogSlot>
      <el-form-item label="上级部门" prop="parentId">
          <tree-select v-if="showTree" :props="props" :options="option" @getValue="treeval" :valueTitle1="title"></tree-select>
      </el-form-item>
      <el-form-item label="部门名称" prop="name"  >
          <el-input v-model="form.name"  clearable></el-input>
      </el-form-item>
    </template>
    <template v-slot:soltTable >
		    <el-table-column
		      prop="name"
		      label="部门">
		    </el-table-column>
    </template>
  </my-treeable>
  </div>
</template>

<script>
  import myTreeable from '../components/myTreetable.vue'
  import treeSelect from '../components/treeSelect.vue'
  export default{
    components:{myTreeable,treeSelect},
    data() {
      return {
          tableattr:{
            'tree-props':{children: 'children'},
            'row-key' : "id",
            'default-expand-all':true
          },
          props:{
            value:'id',       // ID字段名
            label: 'name',     // 显示名称
            children: 'children'
          },
          rules:{
             name: [{ required: true, message: '请输入部门名称！', trigger: 'blur' }],
            },
          form:{
            name:'',
            parentId:'',
          },
          option:[],
		  title:'',
		  showTree:false

      }
    },
      methods:{
        treeval(val){
          if(val===null){
            this.form.parentId='';
          }else{
         this.form.parentId=val;
         }
        
        },
        sdialog(val){
			this.option=[];
			this.title='';
			this.form.parentId='';
			this.showTree=false;
			if(val.id){
			  this.title=val.pidname;
			  this.form.parentId=val.pid;
			  this.opt1(val);
			}else{

				this.opt();
			}
			this.$nextTick(() => {
			    this.showTree=true;
			});

        },
		opt1(val){
		  this.$ajax.post('dept/combotree',{}).then(res=>{
		         var result=res.data;
		         if(result.success){
					 this.option=result.data;
					delTreeNode(this.option,val);
		         }
		   }).catch(res=>{})
		},
        opt(){
          this.$ajax.post('dept/combotree',{}).then(res=>{
                 var result=res.data;
                 if(result.success){
					this.option=result.data;
                 }
           }).catch(res=>{})
        }
    ,
    created() {
		var role =window.sessionStorage.getItem("role")
			if(role!=='ROLE_ADMIN'){
				this.$router.back();
		}
     }
    }
  }


function delTreeNode(arr, item) {
	 for (let i = 0; i < arr.length; i++) {
	    if (item.id === arr[i].id) {
	      arr.splice(i, 1);
	      return;
	    }
	    if (arr[i].children && arr[i].children.length > 0) {
	      delTreeNode(arr[i].children, item)
	    }
	  }

}

</script>

<style>
</style>
